<template>
  <div class="main invoice-detail-container">
    <section>
      <div class="invoice-panel">
        <div class="invoice-title">申请信息</div>
        <el-form :model="formData" :rules="rulesBase" size="medium" ref="formBase" label-width="120px"  :inline="true">
          <el-form-item label="单号:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="订单号:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="会员名称:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="发票性质:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="发票抬头:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="纳税人识别号:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="invoice-panel">
        <div class="invoice-title">发票信息</div>
        <el-form :model="formData" :rules="rulesBase" size="medium" ref="formBase" :inline="true">
          <el-form-item label="发票内容:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="合同签约方:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="税率:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <div style="padding-left: 10px;">
            <div style="line-height: 36px;">蓝票：</div>
            <el-form-item label="序号:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="发票代码:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="发票号码:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="开票日期:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="金额:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" style="margin-top: 5px;">查看PDF文件</el-button>
          </div>
          <div style="padding-left: 10px;">
            <div style="line-height: 36px;">红票：</div>
            <el-form-item label="序号:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="发票代码:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="发票号码:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="开票日期:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-form-item label="金额:" prop="orderNo">
              <el-input v-model="formData.orderNo" ></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" style="margin-top: 5px;">查看PDF文件</el-button>
          </div>

        </el-form>
      </div>
      <div class="invoice-panel">
        <div class="invoice-title">其他</div>
        <el-form :model="formData" :rules="rulesBase" size="medium" ref="formBase" label-width="120px" :inline="true">
          <el-form-item label="状态:" prop="orderNo">
            <el-input v-model="formData.orderNo" ></el-input>
          </el-form-item>
          <el-form-item label="红冲说明:" prop="orderNo">
            <el-input type="textarea" v-model="formData.orderNo" autosize></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align:center;">
          <el-button type="primary" size="mini">保存</el-button>
          <el-button type="primary" size="mini">取消</el-button>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        orderNo: ''
      },
      rulesBase: {
        'orderNo': [
          { required: true, message: '不能为空', trigger: 'change' },
          { max: 100, message: '不能超过100字符', trigger: 'change' }
        ]
      }
    }
  },
  created(){
    console.log(this.id)
  }
}
</script>
<style scoped lang="scss">
.invoice-detail-container {
  .el-form {
    width: 100%;
    .el-input, .el-textarea, .el-select, .el-date-editor{
      width: 100%;
    }
  }
  section {
    padding: 10px;
  }
  .invoice-panel {
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 20px;
  }
  .invoice-title {
    padding: 0 0 10px;
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px solid #eee;
  }
}
</style>
